<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>13 ColorMatrixTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <script src="../dist/xtype-svg.js"></script>
    <script>
        var dom = XType.SVG.create({
            xtype: 'svg',
            parent: document.body,
            attr: {
                width: 800,
                height: 600,
            },
            children: [{
                xtype: 'defs',
                children: [{
                    xtype: 'filter',
                    attr: {
                        id: 'filter1',
                        x: 0,
                        y: 0,
                        width: '200%',
                        height: '200%'
                    },
                    children: [{
                        xtype: 'feoffset',
                        attr: {
                            result: 'offOut',
                            in: 'SourceGraphic',
                            dx: 20,
                            dy: 20
                        }
                    }, {
                        xtype: 'fecolormatrix',
                        attr: {
                            result: 'matrixOut',
                            in: 'offOut',
                            type: 'matrix',
                            values: '0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0'
                        }
                    }, {
                        xtype: 'fegaussianblur',
                        attr: {
                            result: 'blurOut',
                            in: 'matrixOut',
                            stdDeviation: 10
                        }
                    }, {
                        xtype: 'feblend',
                        attr: {
                            in: 'SourceGraphic',
                            in2: 'blurOut',
                            mode: 'normal'
                        }
                    }]
                }]
            }, {
                xtype: 'rect',
                attr: {
                    x: 10,
                    y: 10,
                    width: 100,
                    height: 80,
                    fill: '#f00',
                    stroke: '#0f0',
                    'stroke-width': 2,
                    filter: 'url(#filter1)'
                }
            }]
        });

        dom.render();
    </script>
</body>

</html>